<template>
<!-- 节点类型 -->
  <div>
    <!-- 卡片区域 -->
    <el-card>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>校区管理</el-breadcrumb-item>
            <el-breadcrumb-item>节点类型</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- tab表格 -->
        <el-table
            stripe
            border
            :data="tableData"
            style="width: 100%">
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
                prop="City"
                label="城市"
                width="180">
            </el-table-column>
            <el-table-column
                prop="District"
                label="城区"
                width="180">
            </el-table-column>
            <el-table-column
                prop="info"
                label="是否需要管理"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pageBox @pagintionlist='pagintionlist2' :pagination='paginations'></pageBox>
    </el-card>
    <!-- 编辑对话框 -->
    <!-- @childFn='parentFn'(父亲接收子传递过来的值) :hiddens='dialogVisible'(子向父传递参数) -->

    <dialogIndex @childFn='parentFn' :hiddens='dialogVisible'>
        <el-form :rules="formrules" ref="formrules" :model="infoFrom" label-width="120px">
            <el-form-item label="组织级别：">
                一级
            </el-form-item>
            <el-form-item label="节点名称：" prop="nodeType">
                <el-input v-model="infoFrom.nodeType" placeholder="请输入节点名称，6个字以内"></el-input>
            </el-form-item>
            <el-form-item label="是否需要管理：">
                <el-radio v-model="infoFrom.radio" label="1">是</el-radio>
                <el-radio v-model="infoFrom.radio" label="2">否</el-radio>
            </el-form-item>
            <el-form-item label="管理项：">
                <div class="taglist">
                    <el-tag
                    v-for="tag in tags"
                    :key="tag.name"
                    closable
                    @close="handleClose(tag)">
                    {{tag.name}}
                    </el-tag>
                    <el-tag @click="addAdmin"> 添加 </el-tag>
                </div>
            </el-form-item>
        </el-form>
    </dialogIndex>
    <!-- 添加对话框 -->
    <dialogBox @childFn='parentFn' :hiddens='addDialogVisible'>
        <el-form :rules="formrules1" ref="formrules1" :model="infoFrom1" label-width="120px">
            <el-form-item label="节点名称：" prop="nodeType1">
                <el-input v-model="infoFrom1.nodeType1" placeholder="请输入节点名称，6个字以内"></el-input>
            </el-form-item>
        </el-form>
    </dialogBox>
  </div>
</template>

<script>
// 导入公共对话框组件
import dialogIndex from '@/components/commons/Dialog/index.vue'
// 导入本页面的对话框组件
import dialogBox from './components/dialog.vue'
// 导入分页组件
import pageBox from '@/components/commons/Pagination/index.vue'
// 调用账户列表接口
import {getUserList} from '@/api/user.js'

export default {
  name: 'nodeTypes',

  components:{
      dialogIndex,
      dialogBox,
      pageBox
  },
  data(){
      return{
          // 对话框的内容
            dialogVisible:{},
            addDialogVisible:{},
            infoFrom:{
                nodeType:'',
                radio:'1'
            },
            infoFrom1:{
                nodeType1:'',
                // radio:'1'
            },
            // 管理项
            tags: [
                { name: '标签一', },
                { name: '标签二', },
                { name: '标签三', },
                { name: '标签四', },
                { name: '标签五', }
            ],
            formrules:{
                nodeType: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    {min:2,max:6,message:'6个字以内',trigger:'blur'}
                ]
            },
            formrules1:{
                nodeType1: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    {min:2,max:6,message:'6个字以内',trigger:'blur'}
                ]
            },
            //   账户列表
          tableData:[],
          // 分页
          paginations:{},
          flag:0,
          val:''
      }
  },
  methods:{
    //   接收子传递过来的页码对象
      pagintionlist2(obj){
        //   调用渲染表格
          this.table(obj);
      },
    //   获取表格
      table(val){
        //   调用账户列表
        getUserList({
            queryText:'',
            memberTypeID:'',
            pageIndex:val.current-1,
            pageSize:val.num
        }).then(res=>{
            console.log(res)
            this.tableData=res.data
            // 给子组件传递参数
            this.paginations={
              pageIndex:val.current,//当前显示第几页数
              pageSize:val.num,//每页显示几条数据
              total:res.rowsCount,//总共多少条数据
            }
        })
      },
    //   点击编辑按钮
      handleEdit(row) {
          this.flag=0;
        console.log(row);
        this.dialogVisible={
            // 显示、隐藏对话框
            visible:true,
            title:'编辑'
        }
      },
    //   点击添加按钮
    addAdmin(){
        this.flag=1;
        this.addDialogVisible={
            // 显示、隐藏对话框
            visible:true,
            title:'添加管理项'
        };
    },
      // 关闭并重置表单
        // refsClose(){
        //     this.$refs.formrules.resetFields()
        // },
        // 接收子组件传递的值
        parentFn(val){
            if(val=='sub'){
                if(this.flag==0){
                    this.$refs.formrules.validate((valid) => {
                        if(!valid) return;
                        this.$message.success('保存');
                        // this.dialogVisible.okForm=false
                        this.$refs.formrules.resetFields()
                        this.dialogVisible.visible=false;
                    })
                }else if(this.flag==1){
                    this.$refs.formrules1.validate((valid) => {
                        if(!valid) return;
                        this.$message.success('保存');
                        // this.dialogVisible.okForm=false
                        this.$refs.formrules1.resetFields()
                        this.addDialogVisible.visible=false;
                        
                    })
                
                }
               
                // 重置表单
            }else{
                console.log(val)
                    if(val == "hidden"){
                        this.$refs.formrules.resetFields()
                    }
                    if(val == "hiddenAdd"){
                        this.$refs.formrules1.resetFields()
                    }
                 this.flag=0;
                // if(this.flag==0){
                //    
                // }else if(this.flag==1){
                //     
                // }
                // this.flag=0;
                 
            }
        },
        // 移除管理项
        handleClose(tag){
            console.log(tag)
        }
  },
  created(){
      this.table({
          num:10,
          current:0,
        })
  }
}
</script>

<style lang="less" scoped>
.el-tag--small{
    margin-right: 10px;
}
</style>
